<template>
  <div class="goodsmanage">
    <div class="goodsmanage_main">
      <div class="card_top">
        <el-card :body-style="{ padding: '10' }" style="text-align: left;">
          <div slot="header" class="clearfix">
            <span style="font-size:20px;color:blue">我的举报/</span>
            <span>Report record</span>
          </div>
          <div style="width:40%;display:flex;justify-content:flex-start">
            <el-select v-model="searchsel">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <div style="width:60%">
              <el-input
                style="width:100%"
                suffix-icon="el-icon-search"
                v-model.trim="searchipt"
                placeholder="请输入内容"
                @change="dosearch"
                clearable
              ></el-input>
            </div>
          </div>
          <div class="taber">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="宝贝" name="1"> </el-tab-pane>
              <el-tab-pane label="商家" name="2"> </el-tab-pane>
              <el-tab-pane label="淘客" name="3"> </el-tab-pane>
            </el-tabs>
          </div>
          <div>
            <div class="promotiontable">
              <div>
                <el-table
                  v-loading="loading"
                  :data="tableData"
                  style="width: 100%"
                  :cell-style="rowClass"
                  :header-cell-style="headClass"
                  ref="singleTable"
                  @current-change="handleCurrentChange"
                  highlight-current-row
                >
                  <el-table-column prop="id" label="ID">
                    <template slot-scope="scope">
                      <div>
                        {{ scope.row.id }}
                      </div>
                      <!-- <div>{{ scope.row.id }}</div> -->
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="cooperation_zj_img"
                    label="有效合作截图"
                  >
                    <template slot-scope="scope">
                      <span
                        v-for="(item, index) in scope.row.cooperation_zj_img"
                        :key="index"
                      >
                        <el-image
                          v-if="index < 1"
                          style="width:100px;height:100px"
                          fit
                          :src="item"
                          lazy
                          :preview-src-list="scope.row.cooperation_zj_img"
                        >
                          <div slot="placeholder" class="image-slot">
                            <!-- 加载中<span class="dot">...</span> -->
                            <img
                              style="display:inline-block;width:100%;height:100%"
                              :src="require('@/assets/images/download.gif')"
                              alt=""
                              srcset=""
                            />
                          </div>
                        </el-image>
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="violations_zj_img"
                    label="恶意违规证据截图"
                  >
                    <template slot-scope="scope">
                      <span
                        v-for="(item, index) in scope.row.violations_zj_img"
                        :key="index"
                      >
                        <el-image
                          v-if="index < 1"
                          fit
                          style="width:100px;height:100px"
                          :src="item"
                          :preview-src-list="scope.row.violations_zj_img"
                          lazy
                        >
                          <div slot="placeholder" class="image-slot">
                            <!-- 加载中<span class="dot">...</span> -->
                            <img
                              style="display:inline-block;width:100%;height:100%"
                              :src="require('@/assets/images/download.gif')"
                              alt=""
                              srcset=""
                            />
                          </div>
                        </el-image>
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="name" label="店铺名">
                    <template slot-scope="scope">
                      <div>
                        {{ scope.row.shop_name }}
                      </div>
                      <!-- <div>{{ scope.row.id }}</div> -->
                    </template>
                  </el-table-column>
                  <el-table-column prop="goods" label="合作宝贝">
                    <template slot-scope="scope">
                      <!-- style="height:136px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 6;-webkit-box-orient: vertical;" -->
                      <div v-if="scope.row.shop_name == ''">无</div>
                      <div v-else>
                        {{ scope.row.goods_url }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="coupon" label="合作优惠卷">
                    <template slot-scope="scope">
                      <!-- style="height:136px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 6;-webkit-box-orient: vertical;" -->
                      <div v-if="scope.row.coupon_url == ''">无</div>
                      <div v-else>
                        {{ scope.row.coupon_url }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="report_desc" label="被举报原因">
                    <template slot-scope="scope">
                      <div style="text-align:center">
                        {{ scope.row.report_desc }}
                      </div>
                    </template>
                  </el-table-column>
                  <!-- <el-table-column prop="qq" label="举报人QQ">
                    <template slot-scope="scope">
                      <span>{{ scope.row.report_qq }}</span>
                    </template>
                  </el-table-column> -->
                  <el-table-column prop="create_at" label="举报时间">
                    <template slot-scope="scope">
                      <span>{{
                        scope.row.create_at | formatTime("yyyy-MM-dd hh:mm:ss")
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="status" label="处理结果">
                    <!-- 1=待申诉2=申诉处理中3=永久黑名单4已忽略 -->
                    <template slot-scope="scope">
                      <el-button
                        type="info"
                        size="small"
                        v-if="scope.row.status === 1"
                        >待申诉</el-button
                      >
                      <el-button
                        type="info"
                        disabled
                        size="small"
                        v-if="scope.row.status === 2"
                        >申诉处理中</el-button
                      >
                      <el-button
                        type="danger"
                        size="small"
                        v-if="scope.row.status === 3"
                        >永久黑名单</el-button
                      >
                      <div v-if="scope.row.status === 3">
                        <el-button type="info" size="small">已忽略</el-button>
                        <!-- <div>查看忽略原因</div> -->
                        <el-tooltip
                          class="item"
                          effect="Light"
                          :content="scope.row.ignore_info"
                          placement="bottom"
                        >
                          <el-button>查看忽略原因</el-button>
                        </el-tooltip>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="active" label="操作">
                    <template slot-scope="scope">
                      <el-button
                        type="link"
                        size="small"
                        @click.native.prevent="nolleprosequi(scope.row)"
                        >撤诉</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
                <div style="width:100%;text-align:right">
                  <!-- 分页器 -->
                  <!-- @size-change="handleSizeChange" -->
                  <!-- background -->
                  <el-pagination
                    @current-change="handleCurrentChange2"
                    :current-page="currentPage"
                    :page-size="pagesize"
                    :pager-count="11"
                    layout="total, prev, pager, next, jumper"
                    :total="count"
                  >
                    <!-- :page-sizes="[100, 200, 300, 400]" -->
                  </el-pagination>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { getMyReport } from "@/api/user/user";
export default {
  filters: {
    formatTime: function(datetime, fmt) {
      var date = new Date(datetime);
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          (date.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      }
      var o = {
        "M+": date.getMonth() + 1,
        "d+": date.getDate(),
        "h+": date.getHours(),
        "m+": date.getMinutes(),
        "s+": date.getSeconds()
      };
      for (var k in o) {
        if (new RegExp("(" + k + ")").test(fmt)) {
          var str = o[k] + "";
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length === 1 ? str : ("00" + str).substr(str.length)
          );
        }
      }
      return fmt;
    }
  },
  name: "homepage",
  data() {
    return {
      pagesize: 15,
      currentPage: 1,
      count: 0,
      loading: false,
      activeName: "1",
      searchipt: "",
      tableData: [],
      searchsel: "1",
      options: [
        {
          value: "1",
          label: "按掌柜名搜索"
        },
        {
          value: "2",
          label: "按宝贝链接搜索"
        }
      ]
    };
  },

  computed: {},
  created() {
    this.getMyReport(1, 15, 1);
  },
  mounted() {},
  methods: {
    dosearch() {
      console.log(this.searchipt);
      console.log(this.searchsel);
      if (this.searchsel == 1) {
        this.activeName = "2";
        this.getMyReport(1, 15, this.type, "", this.searchipt);
      } else {
        this.activeName = "1";
        this.getMyReport(1, 15, this.type, this.searchipt, "");
      }
    },
    // 撤诉
    nolleprosequi(row) {
      console.log(row);
    },
    // 获取我的举报列表
    getMyReport(page, pagesize, type, goods_url, shop_name) {
      getMyReport({
        page: page,
        pagesize: pagesize,
        type: type,
        shop_name: shop_name,
        goods_url: goods_url
      })
        .then(res => {
          this.count = res.data.count;
          this.tableData = res.data.data;
          console.log("我的举报列表", this.tableData);
          if (res.data.data.length > 0) {
            // let arr = [];
            this.tableData.forEach(function(val, index, arr) {
              let relearr = res.data.data[index].cooperation_zj_img.split(",");
              // console.log(relearr);
              arr[index].cooperation_zj_img = relearr.map(function(obj) {
                var rObj = {};
                rObj = "http://" + obj;
                return rObj;
              });
              // console.log("有效合作截图", arr[index].cooperation_zj_img);
              let relearr2 = res.data.data[index].violations_zj_img.split(",");
              // console.log(relearr2);
              arr[index].violations_zj_img = relearr2.map(function(obj) {
                var rObj = {};
                rObj = "http://" + obj;
                return rObj;
              });
              // console.log("违规证据截图", arr[index].violations_zj_img);
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleCurrentChange2(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getMyReport(
        this.currentPage,
        15,
        this.type,
        this.searchipt,
        this.searchipt
      );
    },
    // getLocalTime(nS) {
    //   return new Date(parseInt(nS) * 1000)
    //     .toLocaleString()
    //     .replace(/:\d{1,2}$/, " ");
    // },

    // 表头背景色
    headClass() {
      return "text-align: center;background:#eef1f6;";
    },
    // 表格样式设置
    rowClass() {
      return "text-align: center;";
    },
    // 表格选中行高亮
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    // 查看详情
    deleteRow(index, scope, rows) {
      console.log("index", index);
      console.log("scope", scope.row);
      console.log("rows", rows);
      // rows.splice(index, 1);
    },
    // // radio选择
    // searchChange(val) {
    //   this.goods_status = val;
    //   this.getUserGoods(1, 15, this.activeName, val);
    //   // console.log();
    // },
    // 导航栏切换
    handleClick() {
      this.getMyReport(1, 15, this.activeName);
      console.log("导航", this.activeName);
    }
  }
};
</script>

<style lang="less" scoped>
.goodsmanage {
  // width: 970px;
  box-sizing: border-box;
  .goodsmanage_main {
    .promotiontable::v-deep {
      .el-radio-button--mini .el-radio-button__inner {
        border: none !important;
        border-radius: 12px;
      }
      .radiobtn {
        padding: 10px 0;
      }
    }
  }
}
</style>
